

<script setup>

import {showToast} from "vant";
import {ref} from "vue";

const flag = ref('')

const onChange = (index) => {

  if(flag.value !== ''){
    console.log(flag.value)
    const elementBack = document.getElementById(flag.value);
    elementBack.style.height = '80%';
    elementBack.style.width = '95%';
    elementBack.style.marginLeft = '0';
  }

  flag.value = index;
  console.log(flag.value)

  const element = document.getElementById(index);
// 设置高度样式
  element.style.height = '90%';
  element.style.width = '100%';
  element.style.marginLeft = '-5%';

}
</script>

<template  >

  <div id="content">
    <router-view />
  </div>
  <van-tabbar class="nav-bar" route  @change="onChange" active-color="#000">
    <van-tabbar-item replace to="/select" name="index" class="nav-bar-button">
      <template #icon="props" >
        <img src="../assets/最终标签栏世界.png" id="index"  style=" width: 95%;height: 80%;margin-top: 3px;"/>
        <span class="nav-bar-text">首页</span>
      </template>
    </van-tabbar-item>

    <van-tabbar-item replace to="/town"  name="town" class="nav-bar-button">
      <template #icon="props">
        <img src="../assets/最终标签栏城镇.png" id="town"  style=" width: 95%;height: 80%;left: 0; margin-top: -6px;"/>
        <span class="nav-bar-text">轻语</span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/group"  name="group"  class="nav-bar-button">

      <template #icon="props">
        <img src="../assets/最终标签栏宗门.png" id="group"  style=" width: 95%; height: 80%; margin-top: -5px;"/>
        <span class="nav-bar-text">小助手</span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item replace to="/user"  name="user" class="nav-bar-button">
      <template #icon="props" >
        <img src="../assets/最终标签栏用户.png"  id="user"  style=" width: 95%;height: 80%;margin-top: -1px;"/>
        <span class="nav-bar-text">我的</span>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>


<style scoped>


#content {
  width: 100%;
  height: 100%;
}
.nav-bar-button{
  font-size: 18px;
  font-weight: bolder;
  font-family: STXingkai,serif  ;
}
 .nav-bar {
   background-image: url("../assets/导航栏2.png");
   opacity: 0.9;
   z-index: 9999;
   position: fixed;
 }


 /*要求图片和文字重合,居中显示*/
 .nav-bar-text{
   position: absolute;
   top: 112%;
   left: 50%;
   width: 100%;
   height: 100%;
   transform: translate(-50%, -50%);
   text-align: center;
   font-size: 18px;
   font-weight: bolder;
   font-family: STXingkai,serif  ;
 }

</style>